<template>
  <div class="detail">
      <!-- 头部 -->
      <header class="header">
          <span class="iconfont icon-xiangzuo left" @click="toBack"></span>
          <span class="iconfont icon-weixin wx"></span>
          <span class="iconfont icon-pengyouquan wechat"></span>
          <span class="iconfont icon-shenglvehao ellipsis"></span>
          <span class="iconfont icon-gouwuche shopcar"></span>
          <router-link to="/shop"><span class="number">{{this.$store.state.shopCarList.length}}</span></router-link>
      </header>
<div class="container">
          <!-- 轮播图 -->
    <van-swipe :autoplay="4000">
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner1.jpg"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner2.jpg"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner3.jpg"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner4.jpg"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner5.jpg"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner6.jpg"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner7.jpg"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../../static/images/market/detail/banner8.jpg"
      /></van-swipe-item>
    </van-swipe>
    <!-- 评分 -->
    <div class="cover">
        <div class="cleft">评分<span class="red">4.9</span></div>
        <div class="center">月销<span class="red">59</span></div>
        <div class="cright">总销量<span class="red">6172</span></div>
    </div>
    <!-- 价格详情 -->
    <div class="overview">
        <div class="cmsg">吃年糕，年年高，口感软糯甜香，新鲜生产~</div>
        <h3>年茶饭丨黄米年糕 500g×2袋【延安特产】【切片后蒸、煎、炸均可】</h3>
        <div class="price">￥25</div>
        <div class="unprice">￥29.8</div>
        <div class="freight">陕西省榆林市发货·包邮</div>
    </div>
    <!-- 评分星星,左侧滑动 -->
    <div class="starbox">
        <div class="starhead">
            <div class="title"><i class="stars"></i><span  class="txt">4.9星</span></div>
            <div class="number">673人评价</div>
        </div>
        <div class="userBanner">
            <ul class="userList">
                <li v-for="(item,index) in comList" :key="index">
                    <span class="timer">{{item.timer}}</span>
                    <img :src="item.bgcurl"  class="bgc">
                    <img :src="item.nameurl"  class="nameurl">
                    <div class="uname">{{item.uname}}</div>
                    <div class="ucover"></div>
                    <p class="utext">{{item.text}}</p>
                </li>
            </ul>
            <div class="enter">
                <a class="look" href="#">查看评论</a>
            </div>
            <div class="seller">
                <div class="sellerbox">
                    <img class="sellerimg" src="https://i2.chuimg.com/9a69521e04d14fc9897d5052d0915fba_80w_80h.jpg?imageView2/1/w/160/h/160/interlace/1/q/90" alt="">
                    <span class="sellerTitle">年茶饭</span>
                    <span class="sellermsg">商品数2全店包邮</span>
                </div>
                <div class="gosellerbox"><a href="#" class="goseller">去逛逛</a></div>
            </div>
            <div class="noticebox">
            <div class="noticeTitle clerfix">                
                <h3 class="noticeTxt">店铺公告</h3>
                <img class="noticeimg" src="https://i2.chuimg.com/aa3eb2ca630211e7bc9d0242ac110002_48w_48h.png" alt="">
                </div>
               <div class="noticemsg">
                粗粮食品，坚守一生。
            </div>
            </div>

        </div>
    </div>
    <!-- 商品介绍详情页面 -->
    <div class="shopDetail">
        <nav class="shopDenav">
            <span class="first">
            <router-link class="gotext" to="/detail/detailText">详情</router-link>
        </span>
        <span class="secode">
            <router-link class="gosize" to="/detail/detailSize">规格</router-link>
        </span>
        </nav>
         <router-view></router-view>
    </div>
</div>
    <!-- shopCar -->
    <shopcar v-show="this.$store.state.isShowShopCar"></shopcar>
  <!-- tabbar -->
<foot></foot>
  </div>
</template>

<script>

import "../../../static/css/personalIcon/iconfont.css";
import foot from './foot.vue';
import shopcar from './addshopcar.vue';
export default {
    components:{foot,shopcar},
    data(){
        return{
            comList:[
                {"bgcurl":"../../../static/images/market/detail/cover1.jpg","nameurl":"../../../static/images/market/detail/user1.jpg","uname":"施施小妆--ZZ","text":"蘸糖吃完美掩盖了苦味，只留下软糯香甜。黄","timer":"2021-02-09"},
                {"bgcurl":"../../../static/images/market/detail/cover2.jpg","nameurl":"../../../static/images/market/detail/user2.jpg","uname":"赵笑","text":"要过年了买些黄米年糕过年。虽然黄米年糕","timer":"2021-02-03"},
                {"bgcurl":"../../../static/images/market/detail/cover3.jpg","nameurl":"../../../static/images/market/detail/user3.jpg","uname":"园来也","text":"年糕还是挺不错的，炸完放点红糖酱，趁热吃","timer":"2021-01-20"},
                {"bgcurl":"../../../static/images/market/detail/cover4.jpg","nameurl":"../../../static/images/market/detail/user4.jpg","uname":"悠悠歇歇下厨房","text":"良心店家，所以先上个图，还没吃，吃后再评","timer":"2020-07-22"},
            ]
        }
    },
    methods:{
        toBack(){
            this.$router.go(-1)
        }
    }
};
</script>

<style scoped lang="less">
a{
    text-decoration: none;
}
.clerfix{
    display: block;
    content:"";
    clear: both;
}
.detail{
    width: 100%;
}
.container{
    width: 100%;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}
//头部
.header{
    z-index: 99;
    background-color: #fff;
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    span{
        width: 22px;
        height: 22px;
        font-size: 22px;
        display: inline-block;
        margin-left: 30px;
        font-weight: 500;
    }
    .left{
        font-size: 22px;
    }
    .shopcar{
        position: absolute;
        right: 20px;
    }
    .number{
        display: block;
        position: absolute;
        top: .1rem;
        right: 0.2rem;
        color: #fff;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        background-color: #2b8af7;
        border-radius: 50%;
    }
}
// 轮播图
.van-swipe {
  width: 100%;
  height: 300px;
  text-align: center;
  .van-swipe-item {
    width: 100%;
    height: 300px;
  }
  img {
    width: 100%;
    height: 300px;
  }
}
//评分 
.cover{
    width: 100%;
    height: 35px;
    line-height: 35px;
    display: flex;
    text-align: center;
    color:#999;
    font-size: 14px;
    border-bottom:1px #ccc solid;
    .cleft,.center,.cright{
        flex: 1;
        .red{
            font-size: 12px;
            color:red;
            margin-left: 10px;
        }

    }
}
//价格详情
.overview{
    position: relative;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    .cmsg{
    font-size: 12px;
    color:#333;
    margin-top: 10px;
}
h3{
    margin-bottom: 10px;
}
.price,.unprice,.freight{
    display: inline-block;
    color:#999;
    font-size: 12px;
}
.price{
    color: red;
    font-size: 20px;
    font-weight: bold;
}
.unprice{
    margin-left: 20px;
    text-decoration: line-through;
}
.freight{
    margin-left: 100px;
}
}
//评分星星banner
.starbox{
    width: 100%;
    height: 650px;
    .starhead{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: flex;
        font-size: 14px;
        .title,.number{
            flex:1;  
        }
        .title{
            width: 60%;
        }
        .txt{
            font-weight: bold;
        }
        .stars{
            width: 65px;
            height: 13px;
            background: url('../../../static/images/market/detail/stars.png')0px 0px no-repeat;
            background-size: 100% auto;
            display:inline-block;
            margin-top: 10px;
            margin-right: 10px;
        }
        .number{
            color:#fb6650 ;
            font-weight: bold;
        }
    }
    //详情页面
    .userBanner{
        width: 100%;
        height: 355px;
        .userList{
            margin: 0;
            padding: 0;
            list-style: none;
            width: 100%;
            height: 355px;
            white-space: nowrap;
            overflow-x: auto;
            li{
                display: inline-block;
                vertical-align: top;
                position: relative;
                width: 200px;
                height: 340px;
                border: 1px #ccc solid;
                border-radius:10px ;
                margin-left: 15px;
                .timer{
                    display: block;
                    position: absolute;
                    z-index: 10;
                    top:10px;
                    left: 10px;
                    background-color: rgba(0, 0, 0, .6);
                    width: 100px;
                    text-align: center;
                    height: 25px;
                    line-height: 25px;
                    color:#fff;
                    border-radius: 10px;
                    font-size: 14px;
                }
                .bgc{
                    position: absolute;
                    left: 0;
                    top:0;
                    width: 200px;
                    height: 200px;
                    border-radius:10px 10px 0 0 ;
                }
                .nameurl{
                    position: absolute;
                    top: 175px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: block;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
                .uname{
                    position: absolute;
                    left: 50%;
                    top: 235px;
                    transform: translateX(-50%);
                }
                .ucover{
                    position: absolute;
                    top: 265px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 65px;
                    height: 13px;
                    background:url("../../../static/images/market/detail/stars.png")0 0 no-repeat;
                    background-size: 100% auto;
                }
                .utext{
                    position: absolute;
                    width: 100%;
                    left: 50%;
                    top: 280px;
                    transform: translateX(-50%);
                    text-indent: 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
        .enter{
            width: 100%;
            height: 50px;
            position: relative;
            margin-top: 10px;
            border-bottom: 1px #ccc solid;
            .look{
                position: absolute;
                display: block;
                left: 50%;
                transform: translateX(-50%);
                width: 100px;
                height: 30px;
                line-height: 30px;
                border: 1px #fb6650 solid;
                color: #fb6650;
                text-decoration: none;
                text-align: center;
                border-radius: 5px;
            }
        }
        .seller{
            width: 100%;
            height: 80px;
            display: flex;
            border-bottom: 1px #ccc solid;
            .sellerbox{
                width: 70%;
                line-height: 60px;
                position: relative;
                .sellerimg{
                    width: 50px;
                    height: 40px;
                    border-radius: 15px;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                    }
                    .sellerTitle{
                        position: absolute;
                        left:70px;
                        top:0px;
                    }
                    .sellermsg{
                         position: absolute;
                        left:70px;
                        top:20px; 
                        color:#999;                      
                    }
            }
            .gosellerbox{
                text-align: center;
                .goseller{
                    display: block;
                    text-decoration: none;
                    color: #f8654f;
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px #f8654f solid;
                    border-radius: 5px;
                    margin-top: 25px;
                    margin-left: 10px;
                }
            }
        }
        .noticebox{
            width: 100%;
            height: 80px;
            position: relative;
            .noticeTitle{
                width: 100%;
                height: 40px;
                .noticeTxt{
                   text-indent: 10px;
                    float: left;
                    margin: 0;
                    line-height: 40px;
                }
                .noticeimg{
                    width: 30px;
                    height: 25px;
                    margin-top: 10px;
                }
            }
            .noticemsg{
                width: 95%;
                line-height: 40px;
                background-color: #f3d02a;
                position: absolute;
                left:50%;
                text-indent: 10px;
                transform: translateX(-50%);
                border-radius: 5px;
            }
        }
    }
}
//商品介绍详情页面
.shopDetail{
    width: 100%;
    position: relative;
    height: 50px;
    .shopDenav{
        width: 80%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 50px;
        line-height: 50px;
        display: flex;
        text-align: center;
        .first,.secode{
            width: 50%;
            height: 50px;
            line-height: 50px;
            position: relative;
         .gotext,.gosize{
            color: #000;
            display: block;
            width: 100%;
            font-size: 18px;
            &:hover{
            color: red;
            }
             &:hover::after{
                display: block;
                content: "";
                width: 100%;
                height: 2px;
                background-color:red;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
            }
        }
    }
}


</style>